<template>
	<view class="dlInput_psd">
		<view class="dlInput_con" :class="[isActive1 ? 'blueBorder' : '']">
			<label>账号</label>
			<input 
			type="text" 
			placeholder="请输入手机/邮箱号" 
			placeholder-class="placecLass"
			@input="focusClass1"/>
		</view>
		<!-- <input 
		type="password" 
		placeholder="请输入密码" 
		placeholder-class="placecLass"
		@input="focusClass2"
		:class="[isActive2 ? 'blueBorder' : '']"/> -->
		<view class="loginBtn" @tap="goPhoneLogin">下一步</view>
		<view class="loginMethod">
			<text @tap="switchLogyzm">短信登录</text>
			<text class="line"> | </text>
			<text @tap="goForgetPsd">忘记密码</text>
		</view>
		<!-- 当手机登录时出现弹窗 -->
		<view v-if="isShowTc">
			<view class="zhezhao" :style="{height:rootHeight + 'px'}"></view>
			<view class="phoneChooseTc">
				<text>短信验证码登陆</text>
				<text>密码登陆</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isActive1:false,
				isActive2:false,
				isShowLog:'',
				isShowTc:false,//是否显示弹层
				inputValue: '',
			}
		},
		methods:{
			// 实时监听inputValue值
			focusClass1(e){
				if(e.detail.value.length !== 0){
					this.isActive1 = true
				}else{
					this.isActive1 = false
				};
				this.inputValue = e.target.value;
				
			},
			// focusClass2(e){
			// 	if(e.detail.value.length !== 0){
			// 		this.isActive2 = true
			// 	}else{
			// 		this.isActive2 = false
			// 	}
			// },
			// 切换到验证码登录
			switchLogyzm(){
				this.isShowLog = 'yzm';
				this.$emit('sendShowLog',this.isShowLog)
			},
			//跳到忘记密码页面
			goForgetPsd(){
				uni.navigateTo({
					url:'./forgetPsdCon'
				})
			},
			//切换到弹窗或者邮箱登录
			goPhoneLogin(){
				
				let isPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				let isMail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if(isPhone.test(this.inputValue)){
					 this.isShowTc = true;
					console.log('手机号');
				}else if(isMail.test(this.inputValue)){
					console.log('邮箱号');
				}else{
					console.log('输入有误，请从新输入');
				}
				console.log(this.inputValue);
			}
			
		},
		computed:{
			rootHeight(){
				return global.winHeight
			}
		}
	}
</script>

<style>
	.dlInput_con{
		display: flex;
		flex-direction: row;
		border-bottom: 1upx solid #DCDCDC;
		align-items: center;
		padding-bottom:16upx;
		}
	.dlInput_con label{
		font-weight: bold;
		font-size: 28upx;
		color: #000000;
	}
	.dlInput_psd input{
		margin-left: 100upx;
		width:420upx;
		height:46upx;
		line-height:46upx;
		color: #333;
	}
	.placecLass{
		color: #CCCCCC;
		font-size:28upx;
	}
	
	.loginBtn{
		width:582upx;
		height: 89upx;
		line-height: 89upx;
		margin: 76upx auto 0 auto;
		border-radius: 89upx;
		background:linear-gradient(left,#54AAFF,#568FFF);
		color: #fff;
		text-align: center;
		font-size: 28upx;
	}
	.loginMethod{
		margin-top: 28upx;
		color: #999;
		font-size: 24upx;
		text-align: center;
	}
	.loginMethod .line{
		font-weight: 500;
		margin:0 10upx;
	}
	/* .blueBorder{
		border-bottom: 1upx solid #55A0FF!important;
	} */
	.placecLass86{
		font-size: 28upx;
		color: #000;
	}
	/* 遮罩 */
	.zhezhao{
		position: fixed;
		top:0;
		left: 0;
		z-index: 99;
		width: 100%;
		background: rgba(0,0,0,0.5);
	}
	/* 弹窗 */
	.phoneChooseTc{
		position: absolute;
		top:50%;
		left: 50%;
		transform:translate(-50%,-50%);
		z-index: 100;
		background-color: #FFFFFF;
		width:600upx;
		display: flex;
		flex-direction: column;
		border-radius: 10upx;
	}
	.phoneChooseTc text{
		margin:0 38upx;
		height: 94upx;
		line-height: 94upx;
		font-size: 28upx;
		color: #333333;
		border-bottom: 1upx solid #EEEEEE;
	}
	.phoneChooseTc text:last-child{
		border-bottom:none;
	}
</style>
